<template>
  <view class="health-test-page">
    <view class="header">
      <text class="title">健康指数测试</text>
      <text class="subtitle">完成以下测试，了解您的健康状况</text>
    </view>
    
    <view class="test-section">
      <view class="section-title">
        <text>1. 饮水情况</text>
      </view>
      <view class="question-group">
        <text class="question">今天已经喝了多少水？</text>
        <view class="input-group">
          <input 
            type="number" 
            v-model="waterAmount" 
            class="number-input"
            placeholder="请输入毫升数"
          />
          <text class="unit">ml</text>
        </view>
        <text class="tip">推荐每日饮水量：2000ml</text>
      </view>
    </view>
    
    <view class="test-section">
      <view class="section-title">
        <text>2. 情绪状态</text>
      </view>
      <view class="question-group">
        <text class="question">今天的心情如何？</text>
        <view class="mood-selector">
          <view 
            v-for="(item, index) in moodOptions" 
            :key="index"
            class="mood-item"
            :class="{ active: selectedMood === item.value }"
            @click="selectedMood = item.value"
          >
            <image :src="item.icon" class="mood-icon"></image>
            <text>{{ item.label }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <view class="test-section">
      <view class="section-title">
        <text>3. 睡眠质量</text>
      </view>
      <view class="question-group">
        <text class="question">昨晚睡眠质量如何？</text>
        <view class="sleep-selector">
          <view 
            v-for="(item, index) in sleepOptions" 
            :key="index"
            class="sleep-item"
            :class="{ active: selectedSleep === item.value }"
            @click="selectedSleep = item.value"
          >
            <image :src="item.icon" class="sleep-icon"></image>
            <text>{{ item.label }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <view class="test-section">
      <view class="section-title">
        <text>4. 如厕情况</text>
      </view>
      <view class="question-group">
        <text class="question">今天如厕次数？</text>
        <view class="toilet-counter">
          <button class="counter-btn minus" @click="decreaseToiletCount">-</button>
          <text class="count-display">{{ toiletCount }}</text>
          <button class="counter-btn plus" @click="increaseToiletCount">+</button>
        </view>
        <text class="tip">健康范围：1-3次/天</text>
      </view>
    </view>
    
    <view class="action-buttons">
      <button class="submit-btn" @click="calculateHealthIndex">计算健康指数</button>
      <button class="reset-btn" @click="resetForm">重置</button>
    </view>
    
    <!-- 结果弹窗 -->
    <u-popup v-model:show="showResult" type="center" round="10">
      <view class="result-popup">
        <view class="result-header">
          <text class="result-title">您的健康指数</text>
        </view>
        
        <view class="score-display">
          <text class="score">{{ healthIndex.total }}</text>
          <text class="score-label">分</text>
        </view>
        
        <view class="rating-display">
          <text class="rating">{{ healthAssessment.rating }}</text>
        </view>
        
        <view class="suggestion">
          <text>{{ healthAssessment.suggestion }}</text>
        </view>
        
        <view class="detail-scores">
          <view class="detail-item">
            <text class="detail-label">饮水指数</text>
            <text class="detail-score">{{ healthIndex.water.score }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">情绪指数</text>
            <text class="detail-score">{{ healthIndex.mood.score }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">睡眠指数</text>
            <text class="detail-score">{{ healthIndex.sleep.score }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">如厕指数</text>
            <text class="detail-score">{{ healthIndex.toilet.score }}</text>
          </view>
        </view>
        
        <button class="close-btn" @click="showResult = false">关闭</button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { 
  saveDrinkRecord, 
  saveMoodRecord, 
  saveSleepRecord, 
  saveToiletRecord,
  formatDate
} from '../../utils/storage.js'
import { getHealthIndexDetails, getHealthAssessment } from '../../utils/healthIndex.js'

export default {
  data() {
    return {
      waterAmount: '',
      selectedMood: null,
      selectedSleep: null,
      toiletCount: 0,
      showResult: false,
      healthIndex: {
        total: 0,
        water: { score: 0 },
        mood: { score: 0 },
        sleep: { score: 0 },
        toilet: { score: 0 }
      },
      healthAssessment: {
        rating: '',
        suggestion: ''
      },
      moodOptions: [
        { label: '开心', value: 'happy', icon: '/static/icons/mood-happy.png' },
        { label: '兴奋', value: 'excited', icon: '/static/icons/mood-excited.png' },
        { label: '一般', value: 'neutral', icon: '/static/icons/mood-neutral.png' },
        { label: '疲惫', value: 'tired', icon: '/static/icons/mood-tired.png' },
        { label: '低落', value: 'sad', icon: '/static/icons/mood-sad.png' }
      ],
      sleepOptions: [
        { label: '很好', value: 'good', icon: '/static/icons/sleep-good.png' },
        { label: '一般', value: 'normal', icon: '/static/icons/sleep-normal.png' },
        { label: '很差', value: 'bad', icon: '/static/icons/sleep-bad.png' }
      ]
    }
  },
  methods: {
    increaseToiletCount() {
      this.toiletCount++
    },
    decreaseToiletCount() {
      if (this.toiletCount > 0) {
        this.toiletCount--
      }
    },
    calculateHealthIndex() {
      // 保存测试数据到本地存储
      this.saveTestData()
      
      // 计算健康指数
      this.healthIndex = getHealthIndexDetails()
      this.healthAssessment = getHealthAssessment(this.healthIndex.total)
      
      // 显示结果
      this.showResult = true
    },
    saveTestData() {
      const now = new Date()
      const today = formatDate(now)
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')
      const time = `${hours}:${minutes}`
      
      // 保存饮水记录
      if (this.waterAmount && this.waterAmount > 0) {
        const waterRecord = {
          date: today,
          time: time,
          type: 'water',
          amount: Number(this.waterAmount)
        }
        saveDrinkRecord(waterRecord)
      }
      
      // 保存情绪记录
      if (this.selectedMood) {
        const moodRecord = {
          date: today,
          time: time,
          type: this.selectedMood
        }
        saveMoodRecord(moodRecord)
      }
      
      // 保存睡眠记录
      if (this.selectedSleep) {
        const sleepRecord = {
          date: today,
          time: time,
          quality: this.selectedSleep
        }
        saveSleepRecord(sleepRecord)
      }
      
      // 保存如厕记录
      for (let i = 0; i < this.toiletCount; i++) {
        const toiletRecord = {
          date: today,
          time: time
        }
        saveToiletRecord(toiletRecord)
      }
    },
    resetForm() {
      this.waterAmount = ''
      this.selectedMood = null
      this.selectedSleep = null
      this.toiletCount = 0
    }
  }
}
</script>

<style>
.health-test-page {
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 16px;
  color: #666;
}

.test-section {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.question-group {
  padding: 10px 0;
}

.question {
  font-size: 16px;
  margin-bottom: 15px;
  display: block;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.number-input {
  flex: 1;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 0 10px;
  margin-right: 10px;
}

.unit {
  font-size: 16px;
  color: #666;
}

.tip {
  font-size: 14px;
  color: #999;
  margin-top: 5px;
}

.mood-selector, .sleep-selector {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.mood-item, .sleep-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  width: 60px;
}

.mood-item.active, .sleep-item.active {
  background-color: #f0f9ff;
  border: 1px solid #4CAF50;
}

.mood-icon, .sleep-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
}

.toilet-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px 0;
}

.counter-btn {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
}

.minus {
  background-color: #f5f5f5;
  color: #666;
}

.plus {
  background-color: #4CAF50;
  color: white;
}

.count-display {
  font-size: 24px;
  margin: 0 20px;
  min-width: 30px;
  text-align: center;
}

.action-buttons {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}

.submit-btn {
  background-color: #4CAF50;
  color: white;
  flex: 2;
  margin-right: 10px;
}

.reset-btn {
  background-color: #f5f5f5;
  color: #666;
  flex: 1;
}

/* 结果弹窗样式 */
.result-popup {
  width: 300px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
}

.result-header {
  text-align: center;
  margin-bottom: 20px;
}

.result-title {
  font-size: 20px;
  font-weight: bold;
}

.score-display {
  text-align: center;
  margin-bottom: 15px;
}

.score {
  font-size: 48px;
  font-weight: bold;
  color: #4CAF50;
}

.score-label {
  font-size: 18px;
  color: #666;
  margin-left: 5px;
}

.rating-display {
  text-align: center;
  margin-bottom: 15px;
}

.rating {
  font-size: 24px;
  font-weight: bold;
  color: #FF9800;
  background-color: #FFF8E1;
  padding: 5px 15px;
  border-radius: 20px;
}

.suggestion {
  background-color: #F5F5F5;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
}

.detail-scores {
  margin-bottom: 20px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.detail-label {
  color: #666;
}

.detail-score {
  font-weight: bold;
}

.close-btn {
  background-color: #4CAF50;
  color: white;
  width: 100%;
}
</style>